<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>修改用户头像_资源共享平台</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <style type="text/css">
        .layui-container {
            max-width: 600px;
            margin-top: 50px;
        }

        .layui-upload-img {
            width: 92px;
            height: 92px;
            margin: 0 10px 10px 0;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="uploadBtn">上传头像</button>
        <div class="layui-inline layui-word-aux">
            头像大小限制60KB
        </div>
        <div class="layui-upload-list">
            <img class="layui-upload-img" id="uploadImage"/>
            <p id="uploadInfo"></p>
        </div>
    </div>
    <br/>
    <button class="layui-btn" onclick="javascript:parent.reloadPage();">确定</button>
</div>

<script src="/layui/layui.js"></script>
<script src="/js/common.js"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['layer', 'upload', 'element'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            upload = layui.upload;

        // 普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadBtn',
            url: '/user/uploadImage',
            size: 60, // 限制文件大小，单位KB
            before: function (obj) {
                // 预读本地文件，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#uploadImage').attr('src', result); // 图片链接（base64）
                });
            },
            done: function (res) {
                // 如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                // 上传成功
            },
            error: function () {
                // 显示失败状态，并实现重传
                var uploadInfo = $('#uploadInfo');
                uploadInfo.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs upload-reload">重试</a>');
                uploadInfo.find('.upload-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });
</script>
</body>
</html>